<template>
<el-dialog title="角色分配" :visible="showRoleDialog" @close="btnCancel">
    <!-- 放置多选框组 -->
    <el-checkbox-group v-model="RoleIds" >
        <!-- 放置多选框选项 -->
        <el-checkbox v-for="item in RoleList" :key="item.id" :label="item.id">
          {{item.name}}
        </el-checkbox>
    </el-checkbox-group>
    <!-- 放置确认和取消按钮 -->
    <!-- 定义footer插槽 -->
    <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
            <el-button size="small" type="primary" @click="btnOK">确认</el-button>
            <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
    </el-row>
</el-dialog>
</template>

<script>
import {getRoleList} from '@/api/setting'
import { getUserDetailById } from '@/api/user'
import {assignRoles} from '@/api/employees'
export default {
    props: {
        showRoleDialog: {
          // 控制现实角色弹层的
            type: Boolean,
            default: false
        },
        userId: {
            // 这个id就是当前需要处理的用户id
            type: String,
            default: null
        }
    },
    data(){
      return {
        RoleList:[],//记录拿到的所有角色id数据
        RoleIds:[],//记录当前用户的所有角色id数据
      }
    },
    created(){
      this.getRoleList()
    },
    methods:{
    async  getRoleList(){
      const {rows} = await getRoleList({page:1,pagesize:20})//因为角色数量不会太多 所以这里就手写一个20个角色
      this.RoleList = rows
      },
      async getUserDetailById(id){
      const {roleIds} = await getUserDetailById(id)
      this.RoleIds = roleIds
      },
      async btnOK(){
        await assignRoles({ id: this.userId, roleIds: this.RoleIds })
      //   关闭窗体
        this.$emit('update:showRoleDialog', false)
        // 提示成功消息
        this.$message.success('角色分配成功')
      },
      btnCancel(){
        this.RoleIds = []
        this.$emit('update:showRoleDialog', false)
      }
    }
    
}
</script>

<style>

</style>
